<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #menu{
            width: 200px;
            border: 1px solid #cccccc;
            margin: 20px auto;
            text-indent: 20px;
        }
        .title{
            font-weight: bold;
            padding: 4px 0;
            border-bottom: 1px solid #cccccc;
            cursor: pointer;
            background-color: #369;
            color:#fff;
        }
        .list{
            border-bottom: 1px solid #cccccc;
        }
        .list>ul{
            background-color: rgb(99, 135, 170);
            display: none;
        }
    </style>
</head>
<body>
    <div id="menu">
        <div class="list">
            <div class="title">我的好友</div>
            <ul>
                <li>吴亦凡</li>
                <li>鹿晗</li>
                <li>张艺兴</li>
                <li>黄子韬</li>
            </ul>
        </div>
        <div class="list">
            <div class="title">我的姐妹</div>
            <ul>
                <li>迪丽热巴</li>
                <li>杨幂</li>
                <li>金星</li>
                <li>杨颖</li>
            </ul>
        </div>
        <div class="list">
            <div class="title">我的黑名单</div>
            <ul>
                <li>罗志飞</li>
                <li>蔡徐东</li>
                <li>黄海强</li>
                <li>胡海云</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $('.title').click(function(){
            // if($(this).next().css('display')==='none'){
            //     $(this).next().slideDown()
            // }else{
            //     $(this).next().slideUp()
            // }
            //slideToggle()方法，就对上面代码的封装
            $(this).next().slideToggle()

            //手风琴效果
            // $(this).next().slideToggle()
            // $(this).parent().siblings().find('ul').slideUp()
        })
    </script>
</body>
</html>